<template>
  <div class="home">
    <mt-header fixed title="手机端案例">
      <router-link to="#" slot="left">
        <mt-button @click="back" icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <transition>
      <router-view />
    </transition>
    <mt-tabbar fixed v-model="selected">
      <mt-tab-item id="/central">
        <img slot="icon" src="../assets/img/sy.jpg" />
        首页
      </mt-tab-item>
      <mt-tab-item id="/member">
        <img slot="icon" src="../assets/img/hy.jpg" />
        会员
      </mt-tab-item>
      <mt-tab-item id="/shoppingCart">
      <mt-badge size="small" id="badge" type="error">{{ $store.getters.getAllCount }}</mt-badge>
        <img slot="icon" src="../assets/img/gwc.jpg" />
        购物车
      </mt-tab-item>
      <mt-tab-item id="/search">
        <img slot="icon" src="../assets/img/ss.jpg" />
        搜索
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      selected: localStorage.path
    }
  },
  mounted() {
    this.selected = this.$route.path
    // this.getSwipe()
  },
  methods: {
    getSwipe() {
      // 获取轮播图图片
      this.$axios
        .get("http://suggest.taobao.com/sug")
        .then(response => {
          // 请求成功
        })
        .catch(error => {
          // 请求失败
        });
    },
    back() {
      this.$router.go(-1)
    }
  },
  watch: {
    $route(val) {
      localStorage.path = val.path
      if (localStorage.path !== "/" && localStorage.path !== "/member" && localStorage.path !== "/shoppingCart" && localStorage.path !== "/search") {
        localStorage.path = this.selected = "/central";
      } else {
        this.selected = localStorage.path;
      }
    },
    selected: function(val) {
      this.$router.push({
        path: val
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.v-enter {
  opacity: 0;
  transform: translateX(100%);
}
.v-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease;
}
.mint-tab-item-label {
  span {
     position: absolute;
     margin: -34px 0 0 18px;
  }
}
</style>